<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML>
<html lang="zh">
<head>
    <title>search</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link type="text/css" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="bootstrap-3.3.5-dist/html5shiv.min.js"></script>
      <script src="bootstrap-3.3.5-dist/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        
        #center{
            width: 633px;
            height: 33px;
            border: 1px solid rgba(200,200,200,0.9);
            margin: 0 auto;
            transition: all 0.4s;
        }
        #center:hover{
            border: 1px solid rgba(150,150,150,0.9);
        }
        #centerInput{
            border: none;
            width: 533px;
            height: 30px;
            box-shadow:0px 0px 0px white;
            transition: all 0.4s;
            letter-spacing: 4px;
        }
        #centerInput:focus{
            box-shadow:0px 0px 0px white;
        }
        #centerButton{
            border: none;
            width: 94px;
            height: 31px;
            font-weight: 900;
            transition: all 0.4s;
            background:white;
        }
        .searchContent{
            margin: 0 auto;
            width: 633px;
            height: auto;
            border: 1px solid white;
            margin-top: 20px;
            transition: all 0.4s;
        }
        
        @media screen and (max-width:767px){
            #center{
                width: 270px;
                border: 1px solid rgba(200,200,200,0.9);
            }
            #centerInput{
                width: 200px;
            }
            #centerButton{
                width: 64px;
            }
            #searchContent{
                width: 300px;
            }
        }
        @media screen and (min-width:768px) and (max-width:991px){
            #center{
                width: 500px;
                height: 33px;
                border: 1px solid rgba(200,200,200,0.9);
            }
            #centerInput{
                width: 400px;
            }
            #centerButton{
                width: 94px;
            }
            #searchContent{
                width: 500px;
            }
        }
        @media screen and (min-width:992px){
            
        }
    </style>
</head>
    <body>
    <div class="container-fluid">
    	<div class="row">
    	<div class="col-md-12" style="padding:0px;">
    	<%@include file="topnavtag.jsp" %>
    	</div>
    	</div>
    </div>
        <h3 style="text-align:center;">搜索有趣的内容</h3>
    <div id="center">
        <input id="centerInput" /><button id="centerButton" onclick="searchContentByKw()">搜索</button>
    </div>
    <div id="zs"><div id="addSearchResult"></div>
    
    </div>
    
        
    <script src="jquery/jquery-3.0.0.min.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        
        changeCenterBoxLocation();
        function searchContentByKw(){
        	var childs = document.getElementById("addSearchResult").childNodes; 
			for(var i = 0; i < childs.length; i++) { 
			  	document.getElementById("addSearchResult").removeChild(childs[i]); 
			}
        	
        	var kw = $("input")[0].value;
        	
        	if(kw.indexOf("老板娘")>-1){
        		alert("=是老板的最爱=");
        	}
        	if(kw.indexOf("老板")>-1){
        		alert("=老板只喜欢老板娘 =");
        	}
        	if(kw.indexOf("老板")>-1 || kw.indexOf("老板娘")>-1)
        		alert("♡");
        	
        	var xmlhttp;
	    	if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
	      		xmlhttp=new XMLHttpRequest();
	      	}
	    	else{// code for IE6, IE5
	      		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	      	}
	    	
	    	xmlhttp.onreadystatechange=function(){
		      	if (xmlhttp.readyState==4 && xmlhttp.status==200){
		        	var str = xmlhttp.responseText;
		        	
		        	if(str != "" || str != "]"){

			        	var json = JSON.parse(str);
			        	
			        	for(var i = 0; i<getHsonLength(json);i++){
			        		loadData(json[i].title,json[i].content,json[i].lastUpdate,json[i].forumId); 
			        	}
		        	}
		        	else{

		        	}
		        }
	      	}
	    	
	    	xmlhttp.open("POST","search",true);
	    	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	    	xmlhttp.send("keyWords="+kw);
        }
        
        function loadData(title,content,lastUpdate,forumId){
        	var st = "<div class=\"searchContent\">";
            st+= "<h4 style=\"font-weight:900;\">"+title+"<small>&nbsp;"+lastUpdate+"</small></h4>";
            st+= "<a href=\"openCard?forumId="+forumId+"\">"+content+"</a>";
       		st+= "</div>";
        	
        	
        	$("#addSearchResult").append(st);
        }
        
        
        window.onresize = function(){
            changeCenterBoxLocation();
        }
        function changeCenterBoxLocation(){
            var ht = $(this).height();
            var pl = ht/2-266;
            if(pl < 190)
                pl = 90;
            $("#center").css("margin-top",pl+"px");
        }
        function getHsonLength(json){
        	var jsonLength=0;
            for (var i in json) {
            	jsonLength++;
            }
            return jsonLength;
        }
        
    </script>
    </body>
</html>

